<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>健身房登录界面</title>
</head>

<style>
    .huoqu {
        background: #F9F9F9;
        border: 1px solid #2CB9EA;
        color: #2CB9EA;
        padding: 12px 10px;
        font-size: 14px;
        border-radius: 4px;
        cursor: pointer;
        outline: 0
    }

    .huoqu:hover {
        background: #2CB9EA;
        color: #fff
    }
</style>
<!--layUi-->
<link rel="stylesheet" href="../static/layui/css/layui.css"/>
<script src="../static/layui/layui.js"></script>
<script src="../static/js/jquery-3.6.0.min.js"></script>
<!--登录界面样式-->
<link rel="stylesheet" href="../static/css/login1.css">
<!--粒子效果-->
<script src="../static/js/loginbackground.js"></script>
<!--注册-->
<script src="../static/js/login.js"></script>

<body>
<canvas id="J_dotLine" style="z-index:0;position: fixed;left: 0;top: 0;"></canvas>
<div class="box">
    <div class="pre-box">
        <h1>WELCOME</h1>
        <p>JOIN US!</p>
        <div class="img-box">
            <img src="../static/images/background.jpeg">
        </div>
    </div>
    <!--注册的盒子-->

    <div class="register-form">
        <div class="title-box">
            <h1>注册</h1>
        </div>
        <!--输入框的盒子-->
        <form action=" "  class="layui-form">
            <div class="input-box" >
                <input type="text" placeholder="请输入用户名" name="username" lay-verify="required|username"/>
                <input type="password" placeholder="请输入密码" name="password" lay-verify="required|password"/>
                <input type="text" placeholder="请输入电话号码" name="phone" lay-verify="required|phone"/>
                <input type="text" placeholder="请输入年龄" name="age" lay-verify="required|age"/>
                <input type="text" placeholder="请输入真实姓名" name="name" lay-verify="required|name"/>

            </div>
            <!--按钮盒子-->
            <div class="btn-box">

                <button lay-submit lay-filter="demo2">注册</button>
                <!--绑定点击事件-->
                <p onclick="mySwith()">已有账号?去登录</p>
            </div>
        </form>
    </div>

    <!--登录盒子-->
    <div class="login-form">
        <form id="loginForm" action=""  class="layui-form">
            <!--标题盒子-->
            <div class="title-box">
                <h1>登录</h1>
            </div>
            <!--输入框盒子-->
            <div class="input-box">
                <input type="text" placeholder="请输入用户名" name="username" id="username" lay-verify="required|username"
                       lay-reqtext="用户名，岂能为空？"/>
                <input type="password" placeholder="请输入密码" name="password" id="password" lay-verify="required|password"
                       lay-reqtext="密码，岂能为空？"/>


                <div>
                    <input type="radio" name="role" value="管理员" title="管理员" checked>
                    <input type="radio" name="role" value="教练" title="教练">
                    <input type="radio" name="role" value="会员" title="会员">
                </div>
            </div>
            <!--按钮盒子-->
            <div class="btn-box">
                <button  id="embed-submit" lay-submit lay-filter="demo1">登录</button>
                <!--绑定点击事件-->
                <p onclick="mySwith()">没有账号?去注册</p>
            </div>
        </form>
    </div>
</div>
<script>

    layui.use(['form', 'layedit', 'laydate','layer'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
        form.verify({
            username: function(value){
                if(value.length < 3){
                    return '用户名称至少得3个字符啊';
                }
            }
            ,password: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]


        });
        form.on('submit(demo1)',function (data) {
            let username = $("input[name='username']").val();
            let password = $("input[name='password']").val();
            $.ajax({
                url: "http://localhost:8181/user/login",
                type: "post",
                data: JSON.stringify(data.field),
                dataType: "json",
                contentType:'application/json',
                success: function (res) {
                    if(res.code == 200){//code=200登录成功
                        //1.弹出提示信息
                        layer.msg('登录成功',{
                            offset:'15px',
                            icon:1,
                            time:1000
                        },function () {
                            //2.把user数据带到首页
                            var user = res.data;
                            //3.使用JS的存储技术SessionStorage
                            sessionStorage.setItem("user",JSON.stringify(user));
                            //4.跳转到index.html首页，
                            window.location.href = "home.html"
                        });
                    }
                    if(res.code == 401){
                        alert(res.msg);
                    }
                    if(res.code == 505){//用户名或者密码错误
                        alert(res.msg);
                    }
                }
            })
            /*:form.on()表单监控事件中一定要加 return false;
            如果不加的话,后端不会报错,而前端代码中不会运行到success中,
            不同浏览器也有不同效果,谷歌浏览器有时会报错,火狐和其他浏览器100%报错*/
            return false;
        })
        form.on('submit(demo2)',function (data) {
            let username = $("input[name='username']").val();
            let password = $("input[name='password']").val();
            $.ajax({
                type: "post",
                url: "http://localhost:8181/user/register",
                data: JSON.stringify(data.field),
                dataType: "json",
                contentType:'application/json',
                success: function (res) {
                    if(res.code == 200){//code=200登录成功
                        //1.弹出提示信息
                        layer.msg('注册成功',{
                            offset:'15px',
                            icon:1,
                            time:1000
                        },function () {

                            window.location.href = "login.html"
                        });
                    }else {
                        layer.msg('注册失败',{
                            offset:'15px',
                            icon:1,
                            time:1000
                        },function () {

                            window.location.href = "login.html"
                        });
                    }
                }
            })
            return false;
        })
            /*:form.on()表单监控事件中一定要加 return false;
            如果不加的话,后端不会报错,而前端代码中不会运行到success中,
            不同浏览器也有不同效果,谷歌浏览器有时会报错,火狐和其他浏览器100%报错*/

    })
    //Demo


</script>
<script src="../static/js/jquery-3.6.0.min.js"></script>


</body>
</html>